﻿<!DOCTYPE html>
<html>
<head>
    <link href="@Url.Content("~/Content/css/bootstrap.min.css")" rel="stylesheet" media="screen">
    <link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet" media="screen">
    <link href="@Url.Content("~/Content/css/bootstrap-glyphicons.css")" rel="stylesheet" media="screen">
    <script src="@Url.Content("~/Content/js/jquery.min.js")"></script>
</head>
<body>
    <a data-toggle="modal" href="javascript:;" onclick="showlogin()">Đăng nhập</a>
    <div id="login" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p class="fb-login-button text-center">
                        <button class="btn-facebook" id="btn-fblogin">Đăng nhập bằng Facebook</button>
                    </p>
                    <p class="or-login text-center"><span class="or-text">hoặc điền</span></p>
                    @using (Html.BeginForm("Login", "Home", FormMethod.Post, new { Class = "form-horizontal", id = "shared-login" }))
                    {
                        <div id="shared-login-email" class="input-group" style="margin-bottom: 13px;">
                            <span class="input-group-addon">Email &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <input type="text" class="form-control" name="email" placeholder="Email">
                            <span class="help-inline"></span>
                        </div>
                        <div id="shared-login-password" class="input-group" style="margin-bottom: 13px;">
                            <span class="input-group-addon">Mật Khẩu</span>
                            <input type="password" class="form-control" name="password" placeholder="Mật khẩu">
                        </div>
                        <p class="help-inline" style="color:red;text-align:center" id="login-mess"></p>
                        <div class="input-group" style="margin-bottom: 13px;">
                            <div class="controls vn-modal-input">
                                <button type="submit" class="btn btn-danger" id="shared-login-btn">Đăng nhập</button>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
    @RenderBody()
    <script src="@Url.Content("~/Content/js/bootstrap.min.js")"></script>
    <script src="@Url.Content("~/Content/js/jquery.form.js")"></script>
    <script type="text/javascript">
        function showlogin() {
            $('#login').modal({
                show: true
            });
        }
        $('#shared-login').ajaxForm(function (data) {
            if (data) {
                window.location = window.location;
            } else {
                $('#login-mess').text('Sai tài khoản hoặc mật khẩu?');
            }
        });
    </script>
</body>
</html>
